// 1.页面加载完成后,将所有的省的信息拼接成不同的option标签,放到省的select里面
let provinceOption = "";
let provinceSelect = document.querySelector('#province');
let citySelect = document.querySelector('#city');
let countySelect = document.querySelector('#county');

// 遍历数组
cityData.forEach(function (data) {
    // 拼接option标签
    provinceOption += `<option>${data.text}</option>`
})
// 将拼好的省下面的option标签添加到省的select下

provinceSelect.innerHTML += provinceOption;


// 2.用户选择了省之后需要根据当前的省加载对应市的数据,放到市的select下
let selectProvinceName = ""; //记录选择的省的名字
// 给省的select添加change事件
provinceSelect.addEventListener('change', function () {
    selectProvinceName = provinceSelect.value; //拿到当前选择的省的名字
    // 省改变时,将市下面的内容清掉
    citySelect.length = 1;
    cityData.forEach(function (d) {
        if (d.text === selectProvinceName) {
            // console.log(d.children);
            // 获取到当前用户选中的省,通过省中的children拿到省下的市,进行数组拼接,放到市的select下
            let cityOption = "";
            d.children.forEach(function (city) {
                cityOption += `<option>${city.text}</option>`
            })
            citySelect.innerHTML += cityOption
        }
    })
})

// 3.用户选择了市之后需要根据当前的市加载对应县的数据,放到县的select下
let selectCityName = ""; //记录选择的市的名字
// 给市的select添加change事件
citySelect.addEventListener('change', function () {
    countySelect.length = 1;
    selectCityName = citySelect.value;
    // console.log(selectProvinceName, selectCityName);
    cityData.forEach(function (v) {
        // console.log(v);
        if (v.text === selectProvinceName) {
            v.children.forEach(function (c) {
                if (c.text === selectCityName) {
                    let countyOption = "";
                    c.children.forEach(function (c2) {
                        // console.log(c2);
                        countyOption += `<option>${c2.text}</option>`
                    })
                    countySelect.innerHTML += countyOption;
                }
            })
        }

    })
})